<template>

  <div>

    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>招聘管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/job">招聘列表</el-breadcrumb-item>
	  	</el-breadcrumb>
	  </div>



    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>招聘列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span :class="{'color-theme': page.checkStatus == ''}" class="app-tab app-margin-r-40" @click="selectTabStatus('')">全部</span>
        <span :class="{'color-theme': page.checkStatus == 'NOT'}" class="app-tab app-margin-r-40" @click="selectTabStatus('NOT')">未审核</span>
        <span :class="{'color-theme': page.checkStatus == 'PASS'}" class="app-tab app-margin-r-40" @click="selectTabStatus('PASS')">审核通过</span>
        <span :class="{'color-theme': page.checkStatus == 'FAIL'}" class="app-tab app-margin-r-40" @click="selectTabStatus('FAIL')">不通过</span>
        <span :class="{ 'color-theme': page.checkStatus == 'END' }" class="app-tab app-margin-r-40" @click="selectTabStatus('END')">已下架</span>
        <span :class="{ 'color-theme': page.checkStatus == 'DELETE' }" class="app-tab app-margin-r-40" @click="selectTabStatus('DELETE')">已删除</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="工作名、公司名、联系人手机"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary"
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <el-table :data="jobList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>

        <el-table-column
          label="公司"
          width="250">
          <template slot-scope="scope">
            <span>{{scope.row.company_name}}</span>
            <br>
            <span>{{scope.row.address}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="联系人"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.contact_name}}</span>
            <br>
            <span>{{scope.row.contact_phone}}</span>
            <span v-if="scope.row.contact_email != ''">&nbsp;|&nbsp;{{scope.row.contact_email}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="工作描述">
          <template slot-scope="scope">
            <span>{{scope.row.job_name}}</span>
            <span v-if="scope.row.reward != ''"><br>薪资：{{scope.row.reward}}</span>
            <br>
            <span>{{scope.row.job_description}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="数量">
          <template slot-scope="scope">
            <span>{{scope.row.job_number}}</span>
          </template>
        </el-table-column>

        <el-table-column sortable="custom" prop="end_date_time" label="有效日期">
          <template slot-scope="scope">
            <span>{{scope.row.start_date_time}}</span>
            <br>~<br>
            <span>{{scope.row.end_date_time}}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布日期" sortable="custom" prop="add_date_time"/>

        <el-table-column sortable="custom" prop="check_status" label="审核|有效状态">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
              <span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
              <span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
              <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
              &nbsp;|&nbsp;
              <span class="text-bold color-danger" v-if="scope.row.is_time_out == 1">已下架</span>
              <span class="text-bold color-success" v-if="scope.row.is_time_out == 0">未结束</span>
            </div>
            <span class="text-bold color-danger" v-if="scope.row.is_delete == 'YES'">已删除</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
              <el-button
                      v-if="scope.row.check_status != 'PASS'"
                      type="success"
                      plain
                      size="mini"
                      @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>

              <el-button
                      v-if="scope.row.check_status != 'FAIL'"
                      type="warning"
                      plain
                      size="mini"
                      @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>

              <NcButton
                      v-if="scope.row.is_time_out == 0"
                      size="mini"
                      type="danger"
                      :post-option="{url: endUrl, callback: getPage, confirm: '确定要结束招聘信息【'+ scope.row.job_name +'】吗？', data: {id: scope.row.id} }"
                      class="app-margin-l-10 app-margin-v-5"
              >结束</NcButton>

              <NcButton
                      v-if="role > 1"
                      size="mini"
                      type="danger"
                      :post-option="{url: deleteUrl, callback: getPage, confirm: '确定要删除招聘信息【'+ scope.row.job_name +'】吗？', data: {id: scope.row.id} }"
                      class="app-margin-l-10 app-margin-v-5"
              >删除</NcButton>

              <a class="" :href="'#/job/detail/' + scope.row.id" target="_blank">
                <el-button
                        plain
                        size="mini"
                >详情</el-button>
              </a>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>

    <CheckStatusEdit :is-show="checkStatusEditVisible" :job-obj="editJob" :check-yes="checkYes"></CheckStatusEdit>

  </div>

</template>

<script>


  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'
  import CheckStatusEdit from './CheckStatusEditDialog'

  import Api from '../../api/Api'
  import JobApi from '../../api/JobApi'

  import JsonKit from '../../kit/JsonKit'

  import { mapGetters } from 'vuex'

	import Store from '../../store/index.js';

  export default {
  	components: {
  		NcButton, SubmitButton, CheckStatusEdit
  	},
  	data(){
  	  return {
  	  	role: 0,
        jobList: [],

        page: {
          checkStatus: '',
          keyWord: '',
          pageNum: 1,
          pageSize: 10
        },

        checkStatusEditVisible: false,
        checkYes: 0,
        editJob: {},

        searchUrl: JobApi.URL_LIST,
        deleteUrl: JobApi.URL_DELETE,
        endUrl: JobApi.URL_END,
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();
		this.role = Store.state.user.role;
      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
  	},
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
      sortMethod(column) {
        this.page.columnProp = column.prop;
        this.page.columnOrder = column.order;
        this.getPage();
      },
      searchCB(json){
        this.jobList = json.list;
        this.setPage(json);
      },
      getPage(){
        JobApi.list(this.page, json=>{
          this.jobList = json.list;
          this.setPage(json);
        });
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      selectTabStatus(checkStatus){
        this.page.checkStatus = checkStatus;
        this.page.pageNum = 1;
        this.getPage();
      },
      checkStatusHandle(jobId, checkYes){
        this.editJob = JsonKit.getOf(this.jobList, 'id', jobId, null);
        this.checkYes = checkYes;
        this.checkStatusEditVisible = true;
      },
      hideEditDialog(isSuccess){
        this.checkStatusEditVisible = false;
        this.editJob = {};

        if (isSuccess) {
          this.getPage();
        }
      },
  	}
  }

</script>
